import { computed, onMounted, ref, watch } from 'vue'
import { SN_INDEX_COLUMNS } from './static'
import { getSearchPro, updateChecked } from '@/api/modules/sn.js'
import { observeDomResize } from '@/utils'
import { ElMessage } from 'element-plus'

export const useMoreSearch = snIndexStore => {
  const isShowDrawer = ref(false)
  const pageConditions = ref([])
  const searchFields = ref(SN_INDEX_COLUMNS)

  const moreSearchState = ref({})
  const showDrawer = flag => {
    isShowDrawer.value = flag
    if (flag) {
      moreSearchState.value = { ...snIndexStore.searchState.value }
    }
  }
  const getBatchQuery = (values, item) => {
    moreSearchState.value[`batch_${item.prop}`] = values
  }

  const onSearch = () => {
    snIndexStore.setSearchState({ ...moreSearchState.value })
    showDrawer(false)
    snIndexStore.onQuery()
  }

  const onSubmit = async () => {
    pageConditions.value = [...searchFields.value].filter(
      item => item.isChecked === 1
    )
    // const cancelFields = [...searchFields.value].filter(
    //   item => item.isChecked === 0
    // )
    const { code } = await updateChecked({
      ids: pageConditions.value.map(item => item.id)
    })
    if (code === 200) {
      onSearch()
    } else {
      ElMessage.error('更新失败')
    }
  }
  const getMoreSearchField = async () => {
    const { data } = await getSearchPro()
    searchFields.value.forEach(item => {
      const obj = data.find(c => c.searchColumn === item.prop)
      if (obj) {
        Object.assign(item, obj, { isSearch: true })
      }
    })
    searchFields.value = searchFields.value.filter(
      item => item.isSearch === true
    )
    pageConditions.value = searchFields.value.filter(
      item => item.isChecked === 1
    )
  }
  onMounted(() => {
    getMoreSearchField()
  })
  return {
    moreSearchState,
    searchFields,
    pageConditions,
    isShowDrawer,
    getBatchQuery,
    showDrawer,
    onSearch,
    onSubmit
  }
}

export const useSNIndex = () => {
  const searchGridRef = ref(null)
  const tableRef = ref(null)
  const searchState = ref({})
  const tableHeight = ref('70vh')
  const columns = computed(() => {
    return SN_INDEX_COLUMNS.filter(item => !item.hiddenColumn)
  })
  const onQuery = () => {
    const { createTime } = searchState.value

    tableRef.value.refresh({
      ...searchState.value,
      startTime: createTime?.length ? createTime[0] : null,
      endTime: createTime?.length ? createTime[1] : null
    })
  }
  const onSearch = () => {
    setTimeout(() => {
      onQuery()
    })
  }
  const onReset = () => {
    searchState.value = {}
    tableRef.value.reset(searchState)
  }
  const setSearchState = obj => {
    searchState.value = obj
  }
  const observeTableHeight = () => {
    const boxHeight = document.body.offsetHeight
    const node = tableRef.value?.$el
    node &&
      observeDomResize(node, () => {
        const { top } = node.getBoundingClientRect()
        const y = boxHeight - top - 100
        tableHeight.value = y
      })
  }
  watch(
    () => tableRef.value,
    () => {
      observeTableHeight()
    }
  )
  onMounted(() => {
    window.onresize = () => {
      observeTableHeight()
    }
  })
  return {
    columns,
    searchGridRef,
    tableRef,
    searchState,
    setSearchState,
    onQuery,
    onSearch,
    onReset,
    tableHeight
  }
}
export const useShipmentsOrder = () => {
  const isShow = ref(false)
  const params = ref({
    sn: null
  })
  const showDialog = (flag, record) => {
    isShow.value = flag
    record && (params.value.sn = record.sn)
  }
  return {
    isShow,
    showDialog,
    params
  }
}
export const useWarehouseOrder = () => {
  const isShow = ref(false)
  const params = ref({})
  const showWarehouseDialog = (flag, record) => {
    isShow.value = flag

    record && (params.value.sn = record.sn)
  }
  return {
    isShow,
    showWarehouseDialog,
    params
  }
}

export const useSN = () => {
  const shipmentOrderStore = useShipmentsOrder()
  const snIndexStore = useSNIndex()
  const moreSearchStore = useMoreSearch(snIndexStore)
  const warehouseOrderStore = useWarehouseOrder()

  return {
    snIndexStore,
    moreSearchStore,
    shipmentOrderStore,
    warehouseOrderStore
  }
}
